<template>
  <div class="h-full">
    <DataScreenHeader title="生产管理看板" :showMonth="false" classes="" />
    <div
      style="
        height: calc(50% - 50px);
        padding: 10px 20px 20px;
        overflow: hidden;
      "
    >
      <dv-border-box10 class="overflow-hidden">
        <div dv-bg class="flex justify-center items-center m-[20px]">
          <ScrollTableDemo
            :planBIDTOS="planBIDTOS?.mesProducingPlanBIDTOS"
            :tableColumnNum="8"
          />
        </div>
      </dv-border-box10>
    </div>
    <div class="flex h-[100%]">
      <div
        style="
          height: calc(50% - 50px);
          padding: 0px 20px 20px;
          overflow: hidden;
          flex: 1;
        "
      >
        <dv-border-box10 class="overflow-hidden">
          <div dv-bg class="flex justify-center items-center m-[20px]">
            <ScrollTableAndo
              :planBIDTOS="planBIDTOS?.mesAndStopBIDTOS"
              :tableColumnNum="8"
            />
          </div>
        </dv-border-box10>
      </div>
      <div
        style="
          height: calc(50% - 50px);
          padding: 0px 20px 20px 0;
          overflow: hidden;
          width: 380px;
        "
      >
        <dv-border-box10 class="overflow-hidden">
          <div
            dv-bg
            class="flex justify-center items-center m-[20px]"
            style="flex-direction: column"
          >
            <div class="title">
              <span class="text">当前设备状态</span>
            </div>
            <div class="content-right-new-top">
              <div class="it-bg-new">
                <div class="it-bg-new-right-1">
                  <span class="tm1">生产</span>
                  <div>
                    <span class="tm2">
                      {{ planBIDTOS?.deviceStatusCount1 || 0 }}
                    </span>
                    <span class="tm1 text-[17px]! pl-[8px]">台</span>
                  </div>
                </div>
              </div>

              <div class="it-bg-new">
                <div class="it-bg-new-right-1">
                  <span class="tm1">待产</span>
                  <div>
                    <span class="tm2">{{
                      planBIDTOS?.deviceStatusCount2 || 0
                    }}</span>
                    <span class="tm1 text-[17px]! pl-[8px]">台</span>
                  </div>
                </div>
              </div>

              <div class="it-bg-new">
                <div class="it-bg-new-right-1">
                  <span class="tm1">停机维修</span>
                  <div>
                    <span class="tm2" style="color: rgb(255, 112, 112)">{{
                      planBIDTOS?.deviceStatusCount3 || 0
                    }}</span>
                    <span class="tm1 text-[17px]! pl-[8px]">台</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </dv-border-box10>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { BorderBox10 as DvBorderBox10 } from "@kjgl77/datav-vue3";
import { useTransition } from "@vueuse/core";
defineOptions({
  name: "DATASCREENMES02",
  inheritAttrs: false,
});

const props = defineProps({
  planBIDTOS: {
    type: Object,
    default: () => {},
  },
  refreshRate: {
    type: Number,
    default: () => 0,
  },
});

const { planBIDTOS, refreshRate } = toRefs(props);
const emit = defineEmits(["get-info"]);

let timer: any = ref(null);
onMounted(() => {
  if (refreshRate.value) {
    timer.value = setInterval(() => {
      emit("get-info");
    }, refreshRate.value * 1000);
  }
});

onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>

<style lang="scss" scoped>
.content-right-new-top {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  width: 300px;
  margin-top: 20px;

  .it-bg-new {
    display: flex;
    width: 100%;
    height: 102px;
    margin-bottom: 15px;
    // margin-left: -20px;
    background-image: url(@/assets/images/screen/card1.png);
    background-repeat: no-repeat;
    background-size: 295px 95px;
    background-position: center;
    .it-bg-new-left {
      position: relative;

      .bg-round-1 {
        width: 32px;
        position: absolute;
        left: 50%;
        top: 48%;
        transform: translate(-50%, -50%);
      }
    }

    .it-bg-new-right-1 {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      justify-content: space-around;
      // margin-left: 14px;
      position: relative;
      flex: 1;

      .tm1 {
        font-size: 24px;
        color: #fff;
        // margin-right: 15px;
      }

      .tm2 {
        font-size: 36px;
        color: #fff;
        font-weight: 600;
        font-family: DINPro;
        margin-top: -7px;
        writing-mode: horizontal-tb;
        word-spacing: 0px;
        letter-spacing: 0px;
        text-orientation: upright;
        color: transparent;
        background: linear-gradient(
            0deg,
            rgb(0, 192, 250) 0px,
            rgb(255, 255, 255) 100%
          )
          text;
        clip-path: inset(1px);
      }
    }
  }

  .bg-round {
    width: 100px;
    height: 100px;
    transform: scale(1.7);
  }
}

.title {
  background-image: url(@/assets/images/screen/title.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
  width: 100%;
  height: 50px;
  line-height: 50px;
  .text {
    font-size: 22px;
    padding-left: 30px;
    font-weight: 600;
    writing-mode: horizontal-tb;
    text-orientation: upright;
    color: transparent;
    background: linear-gradient(
        0deg,
        rgb(255, 255, 255) 0px,
        rgb(255, 255, 255) 100%
      )
      text;
    clip-path: inset(1px);
  }
}
</style>
